<template>
  <div>
      <waterfall :col="2" :data="flowGoodsList" :loadDistance="10">
          <template>
              <div class="goodslist" v-for="(item,index) in flowGoodsList" :key="index">
                  <router-link :to="{name:'goods',params:{id:item.id}}">
                      <img :src="item.img">
                      <p class="goodslist-title">{{item.title}}</p>
                      <div class="goodslist-tags-out">
                          <van-tag v-for="(item2,index) in item.tags" type="primary" :key="index" class="goodslist-tags">{{item2}}</van-tag>
                      </div>
                      <p class="goodslist-price">￥{{item.price}}</p>
                      <p class="goodslist-subtitle">{{item.description}}</p>
                  </router-link>
              </div>
          </template>
      </waterfall>
  </div>
</template>

<script>
export default {
  props: {
  },
  components: {
  },
  data() {
    return {
        flowGoodsList:[],
        params:{}
    };
  },
  computed: {
  },
  watch: {
  },
  created() {
      if(this.$route.query.isRoot){
          this.params={isRoot:true}
      }
      this.getCategory()
  },
  methods: {
      getCategory(){
          this.$http.get(`/api/spu/category/${this.$route.query.id}`,{params:this.params}).then(
              response=>{
                  console.log('categoryList',response.data)
                  this.flowGoodsList=response.data.list
                  this.flowGoodsList.forEach((item)=>{
                      if(item.tags)item.tags=item.tags.split('$')
                  })
              },error=>{
                  console.log('categoryList',error.msg)
              }
          )
      }
  },
};
</script>
<style scoped lang="less">
@media screen and (max-width :800px) {
    .goodslist{
        background: white;
        text-align: left;
        float: left;
        width: 170px;
        margin: 8px 8px;
        padding-bottom: 10px;
        box-shadow: 0 0 4px rgb(64, 44, 47);
        border-radius: 8px 8px 8px 8px;
        
    }
    .goodslist img{
            border-radius: 8px 8px 0 0;
            width: 100%;
            max-width: 100%;
            max-height: 100%;
        }
    
}
@media screen and(min-width:820px) {
    .goodslist{
        background: white;
        text-align: left;
        float: left;
        width: 96%;
        margin: 8px 8px;
        padding-bottom: 10px;
        box-shadow: 0 0 4px rgb(64, 44, 47);
        border-radius: 8px 8px 8px 8px;
        
        .goodslist-subtitle{
            word-wrap: break-word;
            padding: 5px 10px 5px 11px;
            color: rgb(95, 126, 151);
            font-size: 12px;
        }
        .goodslist-background{
            height: 500px;
            background-color: rgb(169, 221, 187);
        }
        .goodslist-title{
            font-size: 15px;
            color: black;
            padding: 2px 10px 0 11px;
        }
        .goodslist-tags{
            background: rgb(201,174, 115);
            font-size: 5px;
            padding-top: 2px;
            margin-top: 2px;
            margin-left: 4px;
            color: rgb(62, 62, 131);
            padding-left: 10px;
            .goodslist-tags-out{
                margin-left: 6px;
            }
        }
        .goodslist-price{
            padding-top: 5px;
            color: rgb(62, 62, 131);
            padding-left: 10px;
        }
    }
    .goodslist img{
            border-radius: 8px 8px 0 0;
            width: 100%;
            max-width: 100%;
            max-height: 100%;
        }
    
}
</style>